const images =document.querySelectorAll('img')
const callback = (item1)=>{
  console.log(item1)
  item1.forEach(entry=>{
    if(entry.isIntersecting){  //判断是否触发了 我的图片顶部到窗口底部距离 小于可视化窗口的距离
      const image = entry.target;
      const data_src=image.getAttribute('data-src')
      image.setAttribute('src',data_src)
      //触发成功后 我们需要关闭观察者模式   避免重复加载 造成性能的浪费
      observer.unobserve(image)
      console.log('触发成功')
    }
  })
}

//使用浏览器附带的观察者构造函数
const observer =new IntersectionObserver(callback)  //callback 为回调函数

images.forEach(item=>{
  observer.observe(item)
})